{% extends "_layout.html" %}

{% block content %}
    <form id="frm_install" method="post" action="{{ url_for('install') }}" autocomplete="off" onsubmit="return frm_install_submit(this);">
        <input type="hidden" name="token" value="">
        <div class="ins_inner">
            <table class="ins_frm">
                <caption>输入数据库信息</caption>
                <colgroup>
                    <col style="width:150px">
                    <col>
                </colgroup>
                <tbody>
                    <tr>
                        <th scope="row"><label for="db_engine">Engine</label></th>
                        <td>
                            <select id="db_engine" name="db_engine" title="数据库引擎">
                                <option value="sqlite">SQLite</option>
                                <option value="mysql">MySQL</option>
                                <option value="postgresql">PostgreSQL</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="db_host">Host</label></th>
                        <td><input type="text" id="db_host" name="db_host" value="localhost" title="数据库 Host"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="db_port">Port</label></th>
                        <td><input type="text" id="db_port" name="db_port" value="3306" title="数据库 Port"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="db_user">User</label></th>
                        <td><input type="text" id="db_user" name="db_user" title="数据库 User"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="db_password">Password</label></th>
                        <td><input type="text" id="db_password" name="db_password" title="数据库密码"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="db_name">Database Name</label></th>
                        <td>
                            <input type="text" id="db_name" name="db_name" title="数据库名称">
                        </td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="db_table_prefix">TABLE名称前缀</label></th>
                        <td>
                            <input type="text" id="db_table_prefix" name="db_table_prefix"  value="g6_" title="TABLE 前缀">
                            <span>TABLE名称前缀为英文字符, 编号, _ 只有输入是可能的.</span>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="re_install">{{ app_name }} 重新安装</label></th>
                        <td>
                            <label><input type="checkbox" id="reinstall" name="reinstall" value="1"> 重新安装</label>
                        </td>
                    </tr>
                </tbody>
            </table>
        
            <table class="ins_frm">
                <caption>高层管理人员信息输入</caption>
                <colgroup>
                    <col style="width:150px">
                    <col>
                </colgroup>
                <tbody>
                    <tr>
                        <th scope="row"><label for="admin_id">ID</label></th>
                        <td><input type="text" id="admin_id" name="admin_id" value="admin" title="高层管理人员 ID"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="admin_password">密码</label></th>
                        <td><input type="password" id="admin_password" name="admin_password" value="" title="顶级经理密码"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="admin_name">姓名</label></th>
                        <td><input type="text" id="admin_name" name="admin_name" value="高层管理人员" title="最高管理者姓名"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="admin_email">E-mail</label></th>
                        <td><input type="text" id="admin_email" name="admin_email" value="admin@your-domain.com"title="顶级经理电子邮件"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="re_install">最高管理者未设置</label></th>
                        <td>
                            <label><input type="checkbox" id="is_skip_admin" name="is_skip_admin" value="1"> 未设置</label>
                            <span>我们建议您仅在已经拥有顶级管理员帐户时使用它.</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="warning" id="warning_reinstall">
                <strong class="st_strong">
                    Cism! 如果具有相同名称的表已存在, 现有材料将被删除，所以要小心.
                </strong>
            </div>
            <div class="warning" id="warning_skip_admin">
                <strong class="st_strong">
                    Cism! 如果您没有顶级管理员设置，您将无法立即访问管理员页面. <br>
                    直接访问数据库以创建顶级管理员帐户/必须设置.
                </strong>
            </div>
            如果你理解注意力 "下一个" 单击按钮继续安装.
            <div class="inner_btn">
                <input type="submit" value="下一个">
            </div>
        </div>
    </form>
    <script>
    // 更改数据库时，是否显示输入表单
    document.getElementById('db_engine').addEventListener('change', (e) => {
        const db_host = document.getElementById('db_host');
        const db_port = document.getElementById('db_port');
        const db_user = document.getElementById('db_user');
        const db_password = document.getElementById('db_password');
        const db_name = document.getElementById('db_name');

        if (e.target.value == 'sqlite') {
            db_host.parentNode.parentNode.style.display = 'none';
            db_port.parentNode.parentNode.style.display = 'none';
            db_user.parentNode.parentNode.style.display = 'none';
            db_password.parentNode.parentNode.style.display = 'none';
            db_name.parentNode.parentNode.style.display = 'none';
        } else {
            db_host.parentNode.parentNode.style.display = '';
            db_port.parentNode.parentNode.style.display = '';
            db_user.parentNode.parentNode.style.display = '';
            db_password.parentNode.parentNode.style.display = '';
            db_name.parentNode.parentNode.style.display = '';
        }
    });

    document.getElementById('reinstall').addEventListener('change', (e) => {
        if (e.target.checked) {
            if (!confirm('重新安装将删除所有现有数据库材料.\n你想继续吗?')) {
                e.target.checked = false;
            } else {
                document.getElementById('warning_reinstall').style.display = 'block';
            }
        } else {
            document.getElementById('warning_reinstall').style.display = 'none';
        }
    });

    document.getElementById('is_skip_admin').addEventListener('change', (e) => {
        if (e.target.checked) {
            if (!confirm('如果不进行顶级管理员设置，则很难访问管理员页面.\n你想继续吗?')) {
                e.target.checked = false;
            } else {
                document.getElementById('warning_skip_admin').style.display = 'block';
            }
        } else {
            document.getElementById('warning_skip_admin').style.display = 'none';
        }
    });

    // 数据库输入初始化
    document.getElementById('db_engine').dispatchEvent(new Event('change'));

    function frm_install_submit(f) {
        const errorMessages = {
            invalidCharacter: '中存在无效字符. 请用其他字符替换它.',
            validAdminId: '的 4~19作为字符串，第一个字符是英语和英语+可以由数字组合而成.',
            validEmail: '不是meta-yo电子邮件地址. 我要你再检查一遍。.',
        }
        const regexes = {
            invalidCharacter: /\)\;\(passthru|eval|pcntl_exec|exec|system|popen|fopen|fsockopen|file|file_get_contents|readfile|unlink|include|include_once|require|require_once\)\s?\(\$_(get|post|request)\s?\[.*?\]\s?\)/gi,
            validAdminId: /^[a-z]+[a-z0-9]{3,19}$/i,
            validEmail: /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/i,
        }

        function showAlert(message, focusElement) {
            alert(message);
            if (focusElement) {
                focusElement.focus();
            }
            return false;
        }
    
        function checkField(field, errorMessageKey = "") {
            const errorMessage = errorMessages[errorMessageKey];
            const regex = regexes[errorMessageKey];

            let value = field.value;
            let title = field.title;
            let name = field.name;

            if (value === '') {
                return showAlert(`${title}报告(中国) 请输入.`, f[name]);
                return showAlert(`${title}报告(中国) 请输入.`, f[name]);
            }
            if (errorMessageKey == "invalidCharacter" && regex.test(value)) {
                return showAlert(`${title}${errorMessage}`, f[name]);
            }
            if (errorMessageKey == "validAdminId" && !regex.test(value)) {
                return showAlert(`${title}${errorMessage}`, f[name]);
            }
            if (errorMessageKey == "validEmail" && !regex.test(value)) {
                return showAlert(`${title}${errorMessage}`, f[name]);
            }
            return true;
        }
        if (f.db_engine.value != 'sqlite') {
            if (!checkField(f.db_host, "invalidCharacter")
                || !checkField(f.db_user, "invalidCharacter")
                || !checkField(f.db_password, "invalidCharacter")
                || !checkField(f.db_name, "invalidCharacter")
            ) {
                return false;
            }
        }

        if (!checkField(f.db_table_prefix, "invalidCharacter")
            || !checkField(f.admin_id, "validAdminId")
            || !checkField(f.admin_password, "empty")
            || !checkField(f.admin_name, "emtpy")
            || !checkField(f.admin_email, "validEmail")
        ) {
            return false;
        }

        f.token.value = generate_token();
        if (f.token.value == "") {
            alert("创建令牌失败.");
            return false;
        }

        return true;
    }
    </script>
{% endblock content %}